<template>
  <el-form :model="form" ref="ruleForm" label-width="100px" size="small">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-row type="flex" justify="left">
          <el-col :span="12">
            <el-form-item label="数据库名称">
              <el-input v-model="form.servName"></el-input>
            </el-form-item>
            <el-form-item label="数据库描述">
              <el-input type="textarea" v-model="form.servDescribe"></el-input>
            </el-form-item>
            <el-form-item label="数据库类型">
              <el-select v-model="form.servDataType" placeholder="数据库类型" >
                <el-option label="mysql" :value="41"></el-option>
                <el-option label="orcale" :value="42"></el-option>
                <el-option label="sql server" :value="43"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据库地址">
              <el-input v-model="form.servUrl"></el-input>
            </el-form-item>
            <el-form-item label="数据库账号">
              <el-input v-model="form.servAccount"></el-input>
            </el-form-item>
            <el-form-item label="数据库密码">
              <el-input v-model="form.servPassword"></el-input>
            </el-form-item>
            <el-form-item label="可见范围">
              <el-select v-model="form.servRange" placeholder="可见范围">
                <el-option label="市" :value="1"></el-option>
                <el-option label="区县" :value="2"></el-option>
                <el-option label="乡镇" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="可见方式">
              <el-select v-model="form.servLimit" placeholder="可见方式">
                <el-option label="可见" :value="1"></el-option>
                <el-option label="条件可见" :value="2"></el-option>
                <el-option label="线下" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="归属部门">
              <el-select v-model="form.servDepartment" placeholder="归属部门">
                <el-option label="部门1" :value="1"></el-option>
                <el-option label="部门2" :value="2"></el-option>
                <el-option label="部门3" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键词">
              <el-tag
                  :key="tag"
                  v-for="tag in form.servKeyword"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm">
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 关键词</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="发布单位">
              <el-input v-model="form.servUnit"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="form.servUser"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.servPhone"></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱">
              <el-input v-model="form.servEmail"></el-input>
            </el-form-item>
            <el-form-item label="联系人地址">
              <el-input v-model="form.servAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding-left: 40%">
          <el-button type="mini" @click="cancel">取消</el-button>
          <el-button type="mini" @click="nextPage(1)">下一步</el-button>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="使用帮助" name="second">
        <el-row type="flex" justify="left">
          <el-col :span="12">
            <el-form-item label="上传文档" style="padding-top: 20px">
              <el-input v-model="form.servApi" type="file"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding-left: 40%">
          <el-button type="mini" @click="previousPage(2)">上一步</el-button>
          <el-button type="mini" @click="update">完成</el-button>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import {updatedDataBase, queryBaseById} from "@/api/data_center/database-interface";
import $axios from "@/network";

/**
 *{ 应用服务修改 }
 * @param:
 * @author: 马凯
 * @DateTime: 2022/8/2
 */
export default {
  name: "DaraBaseInterfaceEdit",
  data() {
    return {
      activeName: 'first',
      id: this.$route.query.id  || '0',
      form: {
        servName: '',
        servDescribe: '',
        servType: '',
        servUrl: '',
        servAccount: '',
        servPassword: '',
        servRange: '',
        servLimit: '',
        servDepartment: '',
        servKeyword: [],
        servUnit: '',
        servUser: '',
        servPhone: '',
        servEmail: '',
        servAddress: '',
        servApi: '',
        servDate : '',
        servState : '',
        servAdd: '',
        servDataType: '',
      },
      /**
       * 关键词
       */
      inputVisible: false,
      inputValue: '',
    }
  },
  mounted() {
    /**
     * 根据id查询
     */
    // this.queryById(this.id)
  },
  methods: {
    init (servId) {
      this.dataForm.servId = servId || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.servId) {
          $axios({
            url:'/data/dataService/findById',
            method: 'get',
            params: {
              'servId': servId
            },
            // headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
          }).then(data=>{
            if (data && data.code === 200) {
              // this.dataForm.servId = data.data.id
              // this.dataForm.serName = data.data.serName
              // this.dataForm.servDescribe = data.data.serName
              // this.dataForm.servUser = data.data.createdUser.realName
              // this.dataForm.servPhone = data.data.createdUser.phone
              // this.dataForm.servEmail = data.data.createdUser.email
              let data = data.data;
              this.form.servName = data.servName;
              this.form.servDescribe = data.servDescribe;
              this.form.servType = data.servType;
              this.form.servUrl = data.servUrl;
              this.form.servAccount = data.servAccount;
              this.form.servPassword = data.servPassword;
              this.form.servRange = data.servRange;
              this.form.servLimit = data.servLimit;
              this.form.servDepartment = data.servDepartment;
              this.form.servKeyword = data.servKeyword.split(",");
              this.form.servUnit = data.servUnit;
              this.form.servUser = data.servUser;
              this.form.servPhone = data.servPhone;
              this.form.servEmail = data.servEmail;
              this.form.servAddress = data.servAddress;
              this.form.servApi = data.servApi;
              this.form.servState = data.servState;
              this.form.servAdd = data.servAdd;
              this.form.servDataType = data.servDataType;
            }
          })
        }
      })
    },
    /**
     * 修改服务
     */
    update() {
      let form = this.form;
      let formData = new FormData
      let servId = this.id
      formData.append('servId', servId)
      formData.append('servName', form.servName)
      formData.append('servDescribe', form.servDescribe)
      formData.append('servType', form.servType)
      formData.append('servUrl', form.servUrl)
      formData.append('servAccount', form.servAccount)
      formData.append('servPassword', form.servPassword)
      formData.append('servRange', form.servRange)
      formData.append('servLimit', form.servLimit)
      formData.append('servDepartment', form.servDepartment)
      formData.append('servKeyword', form.servKeyword)
      formData.append('servUnit', form.servUnit)
      formData.append('servUser', form.servUser)
      formData.append('servPhone', form.servPhone)
      formData.append('servEmail', form.servEmail)
      formData.append('servAddress', form.servAddress)
      formData.append('servApi', form.servApi)
      formData.append('servDate', form.servDate)
      formData.append('servState', form.servState)
      formData.append('servAdd', form.servAdd)
      formData.append('servDataType', form.servDataType)
      updatedDataBase(formData).then(res=>{
        this.$router.go(-1);
        if(res.status){
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        }else {
          this.$message.error('操作失败');
        }
      })
    },
    /**
     * 根据id查询
     * @param baseId
     */
    queryById(servId) {
      queryBaseById(servId).then(res=>{
        let data = res.data;
        this.form.servName = data.servName;
        this.form.servDescribe = data.servDescribe;
        this.form.servType = data.servType;
        this.form.servUrl = data.servUrl;
        this.form.servAccount = data.servAccount;
        this.form.servPassword = data.servPassword;
        this.form.servRange = data.servRange;
        this.form.servLimit = data.servLimit;
        this.form.servDepartment = data.servDepartment;
        this.form.servKeyword = data.servKeyword.split(",");
        this.form.servUnit = data.servUnit;
        this.form.servUser = data.servUser;
        this.form.servPhone = data.servPhone;
        this.form.servEmail = data.servEmail;
        this.form.servAddress = data.servAddress;
        this.form.servApi = data.servApi;
        this.form.servState = data.servState;
        this.form.servAdd = data.servAdd;
        this.form.servDataType = data.servDataType;
      })
    },
    /**
     *
     * @param tab
     * @param event
     */
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /**
     * 取消添加/修改
     */
    cancel() {
      this.$router.go(-1)
    },
    /**
     * 下一页
     * @param page
     */
    nextPage(page) {
      if (page === 1){
        this.activeName = 'second';
      }else if (page === 2) {
        this.activeName = 'third';
      }
    },
    /**
     * 上一页
     * @param page
     */
    previousPage(page) {
      if (page === 2){
        this.activeName = 'first';
      }else if (page === 3) {
        this.activeName = 'second';
      }
    },

    /**
     * 删除关键词
     * @param tag
     */
    handleClose(tag) {
      this.form.servKeyword.splice(this.form.servKeyword.indexOf(tag), 1);
    },
    /**
     * 关键词
     */
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs['saveTagInput'].$refs.input.focus();
      });
    },
    /**
     * 添加关键词
     */
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.servKeyword.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
img {
  border:2px solid #8f8e8e
}
.el-form {
  .el-form-item {
    .el-input {
      width: 400px;
    }
    .el-select {
      width: 400px;
    }
    .el-textarea {
      width: 400px;
    }
  }
}
</style>
